<script setup>
import navItems from "@/navigation/horizontal";
import { themeConfig } from "@themeConfig";

// Components
import Footer from "@/layouts/components/Footer.vue";
import NavBarNotifications from "@/layouts/components/NavBarNotifications.vue";
import NavSearchBar from "@/layouts/components/NavSearchBar.vue";
import NavbarShortcuts from "@/layouts/components/NavbarShortcuts.vue";
import NavbarThemeSwitcher from "@/layouts/components/NavbarThemeSwitcher.vue";
import UserProfile from "@/layouts/components/UserProfile.vue";
import NavBarI18n from "@core/components/I18n.vue";
import { HorizontalNavLayout } from "@layouts";
import { VNodeRenderer } from "@layouts/components/VNodeRenderer";
let newNavItems = navItems;
const username = localStorage.getItem("username");
if (username !== 'admin') {
  newNavItems = newNavItems.filter((item) => item.title !== "收支管理" && item.title !== "简报管理"&& item.title !== "阈值管理");
}
const redDiv = ref(true);
// watch(
//   () => route,
//   (newRoute) => {
//     // ����·�ɱ仯���߼�
//     if (newRoute.path === "/dashboards/crm") {
//       redDiv.value = true;
//     } else {
//       redDiv.value = false;
//     }
//   },
//   { deep: true }
// );
const activeButton = ref(1);
const toggleButton = (buttonNumber) => {
  activeButton.value = buttonNumber;
};

const buttonClass = (buttonNumber) => {
  return activeButton.value === buttonNumber ? "active-class" : "";
};
</script>

<template>
  <HorizontalNavLayout :nav-items="newNavItems">
    <!-- 👉 navbar -->
    <template #navbar>
      <!-- <RouterLink
        to="/"
        class="app-logo d-flex align-center gap-x-3"
      >
        <VNodeRenderer :nodes="themeConfig.app.logo" />

        <h1 class="app-title font-weight-bold leading-normal text-xl text-capitalize">
          {{ themeConfig.app.title }}
        </h1>
      </RouterLink> -->
      <RouterLink to="/">
        <div class="app-logo d-flex align-center gap-x-3">
          <VNodeRenderer :nodes="themeConfig.app.logo" />
          <h1 class="auth-title">
            <!-- {{ themeConfig.app.title }} -->
            <p>
              {{ themeConfig.app.logoTitle1
              }}<!-- �й������豸�б����� -->
            </p>
            <p>
              {{ themeConfig.app.logoTitle2
              }}<!-- ��ҵ����Ϣ���������ɹ����� -->
            </p>
          </h1>
        </div>
      </RouterLink>
      <VSpacer />

      <!-- <NavSearchBar trigger-btn-class="ms-lg-n3" /> -->

      <!-- <NavBarI18n
        v-if="themeConfig.app.i18n.enable && themeConfig.app.i18n.langConfig?.length"
        :languages="themeConfig.app.i18n.langConfig"
      /> -->

      <div v-show="redDiv">
        <VBtn
          class="addBtn"
          density="compact"
          @click="toggleButton(1)"
          :class="buttonClass(1)"
        >
          {{ themeConfig.app.title
          }}<!-- ���й��� -->
          <svg
            v-show="activeButton === 1"
            xmlns="http://www.w3.org/2000/svg"
            class="icon icon-tabler icon-tabler-arrows-left-right"
            width="44"
            height="44"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M21 17l-18 0" />
            <path d="M6 10l-3 -3l3 -3" />
            <path d="M3 7l18 0" />
            <path d="M18 20l3 -3l-3 -3" />
          </svg>
        </VBtn>
        <VBtn
          class="addBtn"
          density="compact"
          @click="toggleButton(2)"
          :class="buttonClass(2)"
        >
          {{ themeConfig.app.title2
          }}<!-- ���й�ҵ -->
          <svg
            v-show="activeButton === 2"
            xmlns="http://www.w3.org/2000/svg"
            class="icon icon-tabler icon-tabler-arrows-left-right"
            width="44"
            height="44"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M21 17l-18 0" />
            <path d="M6 10l-3 -3l3 -3" />
            <path d="M3 7l18 0" />
            <path d="M18 20l3 -3l-3 -3" />
          </svg>
        </VBtn>
        <VBtn
          class="addBtn"
          density="compact"
          @click="toggleButton(3)"
          :class="buttonClass(3)"
        >
          {{ themeConfig.app.title3
          }}<!-- �й��б� -->
          <svg
            v-show="activeButton === 3"
            xmlns="http://www.w3.org/2000/svg"
            class="icon icon-tabler icon-tabler-arrows-left-right"
            width="44"
            height="44"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M21 17l-18 0" />
            <path d="M6 10l-3 -3l3 -3" />
            <path d="M3 7l18 0" />
            <path d="M18 20l3 -3l-3 -3" />
          </svg>
        </VBtn>
      </div>

      <NavbarThemeSwitcher class="me-2" />
      <!-- <NavbarShortcuts /> -->
      <!-- <NavBarNotifications class="me-2" /> -->
      <UserProfile />
    </template>

    <!-- 👉 Pages -->
    <slot />

    <!-- 👉 Footer -->
    <template #footer>
      <Footer />
    </template>

    <!-- 👉 Customizer -->
    <TheCustomizer />
  </HorizontalNavLayout>
</template>
<style lang="scss" scoped>
.addBtn {
  margin-left: 10px;
  background-color: #ddd !important;
  color: black !important;
}
.active-class {
  background: linear-gradient(
    to right,
    rgb(68, 68, 231),
    rgb(67, 153, 235)
  ) !important;
  color: white !important;
}

.auth-title > p {
  padding: 0;
  margin: 0;
  color: #6057b1;
  font-size: 16px;
  text-align: justify;
  text-align-last: justify;
}

// .auth-logo {
//     position: absolute;
//     z-index: 2;
//     inset-block-start: 0rem !important;
//     inset-inline-start: 0rem !important;
// }
</style>
